<template>
	<view class="box-top">
		<view class="box-top-login">
			<view class="box-top-login-view">

				<!-- 登录后 -->
				<!-- <view class="box-top-login-us" v-if="userInfo.nickName" @click="tologin">
					<image class="box-top-login-headPicture" :src="Imge" />
					<p  class="box-top-login-text">登录/注册</p>
				</view> -->

				<!-- 登录前 -->
				<view class="box-top-login-us" @click="showPopup">
					<image class="box-top-login-headPicture" :src="Imge" />
					<p class="box-top-login-text">登录/注册</p>
				</view>

				<van-icon name="chat-o" color="#ffffff" size="60rpx" />

			</view>
		</view>
		<scroll-view :scroll-y="true" class="box-top-content">
			<view class="box-top-content-grid">
				<view class="box-top-content-grid-text">
					<view class="t-icon t-icon-zhaopinqiuzhi"></view>
					<p class="box-top-content-grid-p">邀请好友</p>
				</view>

				<view class="box-top-content-grid-text">
					<view class="t-icon t-icon-rili"></view>
					<p class="box-top-content-grid-p">签到</p>
				</view>

				<view class="box-top-content-grid-text">
					<view class="t-icon t-icon-yaoqinghaoyou"></view>
					<p class="box-top-content-grid-p">赚取积分</p>
				</view>
			</view>

			<view class="box-top-content-service">
				<p class="box-top-content-service-p">我的服务</p>
				<van-grid :border="false">
					<van-grid-item icon-color="#00bf5c" icon="like" text="收藏" />
					<van-grid-item icon-color="#00bf5c" icon="music" text="本地" />
					<van-grid-item icon-color="#00bf5c" icon="award" text="有声" />
					<van-grid-item icon-color="#00bf5c" icon="checked" text="已购" />
				</van-grid>
			</view>

			<view class="box-top-content-synthesize">
				<p class="box-top-content-synthesize-p">综合其他</p>
				<van-cell icon="medal-o" :border="false" title="热门排行" is-link />
				<van-cell icon="chat-o" :border="false" title="联系客服" is-link />
				<van-cell icon="envelop-o" :border="false" title="意见反馈" is-link />
				<van-cell icon="delete-o" :border="false" title="清理缓存" is-link />
				<van-cell icon="location-o" :border="false" title="关于我们" is-link />

			</view>

			<view class="box-top-content-exit">
				退出登录
			</view>

		</scroll-view>


	</view>
	
	<van-popup :show="show"  round="true" >
		<view class="popup-info">
			<view>为了更好的音乐体验，快去授权登录吧!</view>
			<view class="popup-btn">
				<view><button type="default" class="popup-btn-affirm" @click="affirm">授权登录</button></view>
				<view type="default" class="popup-btn-text" @click="onClose">暂时不用</view>
			</view>
		</view>
	</van-popup>

</template>


<script lang="ts" setup>
	import {
		ref
	} from "vue";


	const Imge = ref('../../static/imge/t1.jpeg');

	const show = ref(false)

	const showPopup = () => {
		show.value = true
	}

	const onClose = () => {
		show.value = false
	}

</script>

<style>
	
	/* 弹窗 */
	.popup-info {
		width: 500rpx;
		font-size: 30rpx;
		text-align: center;
		font-weight: 500;
		padding: 40rpx;
		border-radius: 40rpx;
		background-color: #ffffff;
		color: #3e3a0c;
	}
	
	.popup-btn-affirm {
		width: 250rpx;
		font-size: 30rpx;
		color: #ffffff !important;
		background-color: #feb805 !important;
		margin-top: 50rpx;
		margin-bottom: 10px;
		border-radius: 50rpx;
	}
	.popup-btn-text{
		color: #b8b8b8;
		font-size: 28rpx;
	}
	
	
	
	.box-top {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		position: fixed;
		/*固定背景图*/
	}


	.box-top-login {
		width: 100%;
		height: 20%;
		position: relative;

	}

	.box-top-login-view {
		width: 90%;
		height: 150rpx;
		position: absolute;
		left: 50%;
		top: 65%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box-top-login-us {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.box-top-login-headPicture {
		width: 115rpx;
		height: 115rpx;
		border: 8rpx solid #f0f0f0;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.box-top-login-text {
		font-size: 38rpx;
		font-weight: 900;
	}

	.box-top-content {
		height: 1200rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 0.1rpx;
	}

	.box-top-content-grid {
		width: 650rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box-top-content-grid-text {
		width: 180rpx;
		height: 180rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 25rpx 25rpx rgba(239, 239, 239, 0.7);
	}

	.box-top-content-grid-p {
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		margin-top: 10rpx;
	}

	.box-top-content-service {
		width: 650rpx;
		height: 270rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 25rpx 25rpx rgba(239, 239, 239, 0.7);
	}

	.box-top-content-service-p {
		font-size: 28rpx;
		border-bottom: 2rpx solid #fafafa;
		padding: 20rpx;
	}

	.box-top-content-synthesize {
		width: 650rpx;
		height: 530rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 25rpx 25rpx rgba(239, 239, 239, 0.7);
	}

	.box-top-content-synthesize-p {
		font-size: 28rpx;
		padding: 20rpx;
	}

	.van-cell--clickable {
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
		border-top: 2rpx solid #fafafa;
	}

	.box-top-content-exit {
		width: 200rpx;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		text-align: center;
		color: #ff4800;
	}
</style>
